<template>
  <div class="datail-container">
    <el-card>
      <!-- tabs -->
      <el-tabs v-model="activeName">
        <el-tab-pane label="登陆账户设置" name="first">
          <el-form :rules="rules" ref="form" :model="form" label-width="320px">
            <el-form-item prop="username" label="姓名">
              <el-input style="width:30%" v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item prop="password" label="密码">
              <el-input
                style="width:30%"
                type="password"
                v-model="form.password"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm">更新</el-button>
              <el-button @click="back">取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="个人详情" name="second">
          <!-- 使用,个人详情的子组件,info -->
          <info></info>
        </el-tab-pane>
        <el-tab-pane label="岗位信息" name="third">
          <!-- 使用,岗位信息的子组件,managementjob -->
          <managementjob></managementjob>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
// 7月19号---------------7月19号---------------------------
// getMoreInfo获取员工基本信息接口(7月10号也用过)
import { getMoreInfo } from '../../api/user.js'
// saveUserDetailById,修改用户的接口
import { saveUserDetailById } from '../../api/employees.js'
// 7月20号---------------7月20号---------------------------
// 导入,个人详情的子组件
import info from './components/Info.vue'
// 导入,岗位信息的子组件
import managementjob from './components/managementjob.vue'
export default {
  components: {
    info,
    managementjob
  },
  name: 'datail',
  data () {
    return {
      activeName: 'first',
      // form:""会报错 用对象
      form: {
        username: '',
        password: ''
      },
      userInfo: '', // 存储getMoreInfo获取到的数据
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 9, message: '密码长度为6到9', trigger: 'blur' }
        ]
      }
    }
  },
  // 声明周期钩子函数
  async created () {
    // 注意注意,这是错误写法,因为接口要的是一个对象export function getMoreInfo({ id })
    // const res = await getMoreInfo(this.$route.params.id)
    const res = await getMoreInfo({ id: this.$route.params.id })
    // console.log('res', res)
    // 111,保存用户信息
    this.userInfo = res
    // 222,然后再讲服务器返回的数据保存在form里面
    this.form.username = res.username
    // 密码不需要渲染
    // this.form.passwoed = res.passwoed
  },
  methods: {
    // 点击更新事件,提交数据
    submitForm () {
      this.$refs.form.validate(async valid => {
        if (valid) {
          // 效验成功
          // ...this.userInfo原本userInfo里面的所有信息都获取到了
          // ...this.form 就是form的两个信息也进去了
          // 通过上面得res可以打印出来userInfo里面的数据
          await saveUserDetailById({ ...this.userInfo, ...this.form })
          // console.log('123') // 能到这里说明没有问题
          this.$message.success('修改成功')
          // 返回上一也 ,上一个历史记录
          this.$router.back()
        } else {
          this.$message.error('数据格式错误.请检查!')
          return false
        }
      })
    },
    // 点击取消逻辑
    back () {
      this.$router.back()
    }
  }
}
</script>

<style>
.datail-container {
  padding: 20px;
}
</style>
